<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            user-select:none;
        }
        body{
            background-color: black;
        }
        .logo{
            margin-left: 10%;
            margin-top: 30px;
            color: white;
        }
        .main{
            margin: 0 auto;
            width: 80%;
            display: flex;
            padding-top: 90px;
        }
        .left{
            width: 50%;
        }
        .left h1{
            color: white;
        }
        .left p{
            color: white;
            margin-top: 40px;
            line-height: 40px;
            font-family: Arial;
            text-align: left;
        }
        .right{
            width: 40%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .right button{
            height: 50px;
            width: 200px;
            background-color: transparent;
            border: 2px solid white;
            margin-top: 70px;
            color: white;
        }
        #backName{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            top: 0;
            left: 0;
            text-align: center;
            display: none;
        }
        .select{
            display: none;
        }
        .attr{
            width: 80%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            color: white;
        }
        #Tools{
            position: absolute;
            left: 450px;
            top: 700px;
            color: white;
        }
        .Button{
            position: absolute;
            top: 600px;
            left: 800px;
        }
        button{
            height: 50px;
            width: 200px;
            background-color: transparent;
            border: 2px solid white;
            margin-top: 70px;
            color: white;
        }
        .Game{
            display: none;
            width: 100%;
            height: 100%;
        }
        #Game{
            position: absolute;
            top: 50px;
            left: 450px;
        }
        .po{
            position: absolute;
        }
        .WIn{
            display: none;
        }
        .rank{
             display: none;
        }
    </style>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="content">
    <div class="logo">
        <h3>Logo</h3>
    </div>
    <div class="main">
        <div class="left">
            <h1>Link Go</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="right">
            <button class="page" onclick="backNa()">New Game</button>
            <button class="page">Load Game</button>
            <button class="page">Ranking</button>
            <button class="select" onclick="select(1)">Easy</button>
            <button class="select" onclick="select(2)">Secondary</button>
            <button class="select" onclick="select(3)">Difficulty</button>
        </div>
    </div>
</div>
<div id="backName">
    <input type="text" id="name"><button onclick="HomeHide()">Submit</button>
</div>
<div class="Game">
    <div class="attr">
        <div>name</div>
        <div>Gold <span id="GoldText"></span></div>
        <div>Timer <span id="TimeText"></span></div>
        <div>Score<span id="ScoreText"></span></div>
        <div>setting</div>
    </div>
    <canvas id="Game" width="600" height="700"></canvas>
    <div id="Tools">Tools</div>
    <div id="cover" class="po" style="left: 500px;top: 700px;height: 30px;width: 30px" onclick="AddLu()"></div>
    <div  class="po" style="left: 540px;top: 700px;height: 30px;width: 30px" onclick="AddGate(1,this)"></div>
    <div  class="po" style="left: 580px;top: 700px;height: 30px;width: 30px" onclick="AddGate(2,this)"></div>
    <div  class="po" style="left: 620px;top: 700px;height: 30px;width: 30px" onclick="AddGate(3,this)"></div>
    <div class="Button">
        <button onclick="load()">Start</button>
        <button>Home Page</button>
    </div>
</div>
<div class="WIn">
    <h3 id="Text"></h3>
    <div><button id="Rank"></button><button id="Again"></button></div>
</div>
<div class="rank">
    <table id="rankTable">
        <thead><td>Rank</td><td>NickName</td><td>Score</td><td>Timer</td></thead>
        <tbody id='rankBody'>
        <tr>
            <td>1</td><td>Name</td><td>100</td><td>100</td>
        </tr>
        <tr>
            <td>1</td><td>Name</td><td>100</td><td>100</td>
        </tr>
        <tr>
            <td>1</td><td>Name</td><td>100</td><td>100</td>
        </tr>
        <tr>
            <td>1</td><td>Name</td><td>100</td><td>100</td>
        </tr>
        <tr>
            <td>1</td><td>Name</td><td>100</td><td>100</td>
        </tr>
        </tbody>
    </table>
</div>
<script>
        function Game(){
             this.Score=0
             this.luJude = false
             this.index=''
             this.Time=100
             this.Gold=0
             this.name = ''
             this.Bath = [];
             this.ctx = ''
             this.canvas=''
             this.Gate = []
             this.light = []
             this.GateJude = false
             this.citizen = []
             this.loadJude = false
             this.Win = false
             this.xuniArr = []
             this.zhuSet = {
                 0:'./img/chu.png',
                 1:'./img/sun.png',
                 2:'./img/moon.png',
                 3:'./img/xing.png',
             }
             this.init= function (){
                  this.canvas = document.querySelector('#Game');
                  this.ctx = this.canvas.getContext('2d');
             };
             this.map=[
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
             ]
            this.ToolSet ={
                 0:'./img/lu.png',
                1:'./img/chong.png',
                2:'./img/deng.png',
                3:'./img/rubbet.png',
            }
            this.icon = {
                1:'./img/s.png',
                2:'./img/m.png',
                3:'./img/x.png',
            }
            this.createImg= function (index,left,top,width=30,height=30){
                   let Img =   new Image();
                   Img.src = this.ToolSet[index];
                    if(this.loadJude == false) {
                        Img.onload = ()=> {
                            this.ctx.drawImage(Img, left, top, width, height)
                        }
                    }else{
                        this.ctx.drawImage(Img, left, top, width, height)
                    }

            };
             this.Again = function (){
                 this.Bath = [];
                 this.light = [];
                 this.Gate = [];
                 this.citizen = [];
                 for (let i =0;i<22;i++){
                     for (let m =0;m<20;m++){
                         this.map[i][m] = 0;
                     }
                 }
                 if(Games.win){
                     select(++Games.index)
                 }else{
                     select(Games.index);
                 }
             }
            this.mapCreate = function (jude = 0){
                  this.ctx.clearRect(0,0,600,700);
                  this.ctx.beginPath();
                  this.ctx.strokeStyle = 'white';
                  let map = this.map;
                  for (let i=0;i<21;i++){
                      for (let m =0;m<20;m++){
                             if(map[i][m]==1){
                                   let Img = new Image();
                                   Img.src = './img/lu.png';
                                   this.ctx.drawImage(Img,m*30,i*30,30,30);
                             }
                      }
                      this.ctx.moveTo(0,i*30);
                      this.ctx.lineTo(this.canvas.width,i*30);
                      this.ctx.moveTo(i*30,0);
                      this.ctx.lineTo(i*30,600);
                  }
                  this.ctx.stroke();
                if(this.Gate[0] == 0 || this.Gate[0]){
                      let chong = new Image();
                      chong.src = './img/chong.png';
                      this.ctx.drawImage(chong,this.Gate[0]*30,this.Gate[1]*30,30,30)
                }
                for (let i =0;i<this.light.length;i++){
                     let deng = new Image();
                     deng.src = './img/deng.png';
                     this.ctx.drawImage(deng,this.light[i][0]*30,this.light[i][1]*30,30,30);
                }
                for (let i =0;i<this.Bath.length;i++){
                    let zhu = new Image();
                    zhu.src = this.zhuSet[this.Bath[i][0]];
                    if(this.Bath[i][0] == 0){
                        for(let l=0;l<this.Bath[i][5].length;l++){
                               let icon = new Image();
                               icon.src = this.icon[this.Bath[i][5][l]];
                               this.ctx.drawImage(icon,(this.Bath[i][1]*30)-10 + (l*10),this.Bath[i][2]*30 - 10,10,10)
                        }
                    }
                    if(jude == 0){
                        this.ctx.drawImage(zhu,this.Bath[i][1]*30,this.Bath[i][2]*30,30,30)
                    }else{
                        zhu.onload = ()=>{
                            this.ctx.drawImage(zhu,this.Bath[i][1]*30,this.Bath[i][2]*30,30,30)
                        }
                    }
                }
                this.createImg(0,50,650);
                this.createImg(1,90,650);
                this.createImg(2,130,650);
                this.createImg(3,170,650);
            }
            this.xuni = function(x,y){
                let X = parseInt(x / 30);
                let Y = parseInt(y / 30);
                this.createImg(0,X*30,Y*30,30,30);
            }
            this.AddImg = function (){
                for (let i = 0;i<this.xuniArr.length;i++){
                      this.map[this.xuniArr[i]['Y']][this.xuniArr[i]['X']] = 1;
                }
                this.xuniArr=[];
                this.mapCreate();
            }
            this.createCitizen = function (){
                 setInterval(()=>{
                      for (let i =0;i<this.Bath.length;i++){
                           if(this.Bath[i][0] == 0 && this.Bath[i][3] !=5 && this.Bath[i][4] == 0){
                                this.citizen.push([this.Bath[i][1] * 30 ,this.Bath[i][2]*30,i,0,{'left':'c','top':'c'},{'left':0,'top':0},this.Bath[i][5][this.Bath[i][3]]]);
                                this.Bath[i][4] = 1;
                                this.Bath[i][3] +=1;
                                break;
                           }
                      }
                 },200)
            }
            this.SetTime = function (){
                 setInterval(()=>{
                      this.Time -=1;
                      SetText('TimeText',this.Time);
                 },1000)
            }
            this.F = function (index,left,top){
               let Img = new Image();
               Img.src = this.icon[index];
               this.ctx.drawImage(Img,left,top,20,20)
            }
            this.CitizenY = function (){
                 let task = ()=>{
                       window.requestAnimationFrame(task);
                       this.mapCreate();
                       let Img = new Image();
                       Img.src='./img/ren.png';
                       for (let i =0;i<this.citizen.length;i++){
                            if(this.citizen[i][3]<30){
                                 let left = this.citizen[i][0];
                                 let top = this.citizen[i][1]+1;
                                 this.citizen[i][1] = top;
                                 this.citizen[i][3] +=1;
                                 this.F(this.citizen[i][6],left+10/2,top-10);
                                 this.ctx.drawImage(Img,left,top,30,30);
                            }else{
                                 let map = this.map;
                                  if(this.citizen[i][3] == 30){
                                       let Arr = [];
                                       let top = this.citizen[i][1] / 30;
                                       let left = this.citizen[i][0] / 30;
                                       let GateJude = false
                                       let Light = false;
                                       let count = 0;
                                       let LightArr = []
                                       for (let k=0;k<this.light.length;k++){
                                            if(left == this.light[k][0] && top == this.light[k][1]){
                                                if(map[top-1][left] == 1){
                                                    let hand = this.seek([left,top],[left,top-1],this.citizen[i][6],count)
                                                    if(hand){
                                                        hand.left = left;
                                                        hand.top = top-1;
                                                        LightArr =  this.HandeLight(LightArr,hand);
                                                      Light = true
                                                    }
                                                }
                                                if(map[top+1][left] == 1){
                                                    let hand =this.seek([left,top],[left,top+1],this.citizen[i][6],count)
                                                    if(hand){
                                                        hand.left = left;
                                                        hand.top = top+1;
                                                        LightArr =  this.HandeLight(LightArr,hand);
                                                        Light = true
                                                    }
                                                }
                                                 if(map[top][left+1] == 1){
                                                     let hand =this.seek([left,top],[left+1,top],this.citizen[i][6],count)
                                                      if(hand){
                                                          hand.left = left+1;
                                                          hand.top = top;
                                                          LightArr =  this.HandeLight(LightArr,hand);
                                                          Light = true
                                                      }
                                                 }
                                                if(map[top][left-1] == 1){
                                                    let hand = this.seek([left,top],[left-1,top],this.citizen[i][6],count)
                                                    if(hand){
                                                        hand.left = left-1;
                                                        hand.top = top;
                                                        LightArr =  this.HandeLight(LightArr,hand);
                                                        Light = true
                                                    }
                                                }

                                            }
                                       }
                                       if(Light == true){
                                           let set = LightArr.shift();
                                           this.setting(i,set.left,set.top,Img);
                                           continue;
                                       }
                                       for (let l = 0;l<this.Bath.length;l++){
                                            if(this.Bath[l][1] == left && this.Bath[l][2] == top && this.Bath[l][0]!=0){
                                                     if(this.Bath[l][0] == this.citizen[i][6]){
                                                            this.Bath[this.citizen[i][2]][4] = 0;
                                                            this.citizen.splice(i,1);
                                                            this.Score +=100;
                                                            SetText('ScoreText',this.Score);
                                                            this.judeWin();
                                                            GateJude = true;
                                                     }else if((this.Gate[0] == 0 || this.Gate) && this.Gate[2] == 0){
                                                           this.citizen[i][0] = this.Gate[0] * 30;
                                                           this.citizen[i][1] = this.Gate[1] * 30;
                                                           this.Gate[2]  = 1
                                                           GateJude = true
                                                      }else{
                                                         this.Bath[this.citizen[i][2]][4] = 0;
                                                         this.citizen.splice(i,1);
                                                         this.Score -=100;
                                                         SetText('ScoreText',this.Score);
                                                         this.judeWin();
                                                         GateJude = true;
                                                     }
                                            }
                                            if(left == this.Bath[l][1] && top - 1 == this.Bath[l][2] && this.Bath[l][0] !=0){
                                                Arr.push([left,top - 1])
                                            }
                                       }
                                       if(GateJude){
                                           continue
                                       }
                                       if(map[top][left + 1] == 1){
                                           Arr.push([left+1,top])
                                       }
                                      if(map[top][left - 1] == 1){
                                          Arr.push([left-1,top])
                                      }
                                      if(map[top +1][left] == 1){
                                          Arr.push([left,top +1])
                                      }
                                      if(map[top - 1][left] == 1){
                                          Arr.push([left,top - 1])
                                      }
                                      if(this.citizen[i][4]['left'] !='c' && this.citizen[i][4]['top'] !='c' && Arr.length !=1){
                                              for (let p = 0; p<Arr.length;p++){
                                                  if(Arr[p][0] == this.citizen[i][4]['left'] && Arr[p][1] == this.citizen[i][4]['top']){
                                                       Arr.splice(p,1);
                                                  }
                                              }
                                      }
                                      let length = Arr.length;
                                      let random = Math.floor(Math.random()*length);
                                      let ValueLeft = Arr[random][0];
                                      let ValueTop = Arr[random][1];
                                      this.setting(i,ValueLeft,ValueTop,Img);
                                  }else{
                                      this.citizen[i][0] += this.citizen[i][5]['left'];
                                      this.citizen[i][1] += this.citizen[i][5]['top'];
                                      this.citizen[i][3]+=1;
                                      if(this.citizen[i][3] == 60){
                                          this.citizen[i][3] = 30;
                                      }
                                      this.F(this.citizen[i][6],this.citizen[i][0]+10/2,this.citizen[i][1]-10);
                                      this.ctx.drawImage(Img,this.citizen[i][0],this.citizen[i][1],30,30)
                                  }
                            }
                       }
                 }
                 task();
            }
            this.judeWin = function (){
                 let jude = true;
                 for (let i =0; i<this.Bath.length;i++){
                      if(this.Bath[i][0]==0 && this.Bath[i][3] !=5){
                            jude  = false;
                      }
                 }
                 if(jude){
                        $('.WIn').show();
                       if(this.Score >=0){
                           SetText('Text','You Lose')

                       }else{
                           SetText('Text','You Win')
                            if(localStorage.getItem('rank')){
                                   let Arr = JSON.parse(localStorage.getItem('rank'));
                                   Arr.push({'name':this.name,'score':this.Score,'time':this.Time})
                                   Arr =  JSON.stringify(Arr);
                                   localStorage.setItem('rank',Arr);
                            }else{
                                       let Arr =[{'name':this.name,'score':this.Score,'time':this.Time}];
                                       Arr =  JSON.stringify(Arr);
                                       localStorage.setItem('rank',Arr);
                            }
                       }
                 }
            }
            this.LoadHui = function (){
                window.cancelAnimationFrame();
                 for (let i =0;i<this.Bath.length;i++){
                       this.Bath[i][3]=0;
                       this.Bath[i][4]=0;
                 }
                 this.citizen = [];
                document.getElementById('start').onclick = Load;
            }
            this.createRank = function (){
                  $('.Game').hide();
                  $('#content').hide();
                  $('.rank').show();
                  let rank = localStorage.getItem('rank');
                  rank = JSON.parse(rank);
                  rank.sort(function (item1,item2){
                        return item1.score - item2.score
                  })
                  let b = document.getElementById('rankBody').children;
                  for (let i =0;i<rank.length;i++){
                        b[i].children[0].innerHTML = i+1;
                        b[i].children[1].innerHTML = rank[i]['name'];
                        b[i].children[2].innerHTML = rank[i]['score'];
                        b[i].children[3].innerHTML = rank[i]['time'];
                  }
            }
            this.HandeLight = function (Arr,value){
                     Arr.push(value);
                     Arr.sort(function (value1,value2){
                        return  value1.self - value2.self
                     })
                     return Arr;
            }
            this.seek = function (current,next,point,count){
                    for (let i =0;i<this.Bath.length;i++){
                         if(next[0] == this.Bath[i][1] && next[1]-1 == this.Bath[i][2] && this.Bath[i][0] ==point){
                                return  {'self':count}
                         }
                    }
                    if(count > 9000){
                         return false;
                    }
                    let Arr = [];
                    let map = this.map;
                    count++;
                    if(map[next[1]][next[0] - 1] == 1){
                        Arr.push([next[0]-1,next[1]]);
                    }
                if(map[next[1]][next[0] + 1] == 1){
                    Arr.push([next[0]+1,next[1]]);
                }
                if(map[next[1]-1][next[0]] == 1){
                    Arr.push([next[0],next[1]-1]);
                }
                if(map[next[1]+1][next[0]] == 1){
                    Arr.push([next[0],next[1]+1]);
                }
                for (let i=0;i<Arr.length;i++){
                      if(Arr[i][0] !=current[0] || Arr[i][1] !=current[1]){
                          let jude = this.seek(next,Arr[i],point,count);
                          if(jude){
                              return  jude
                          }
                          if(jude ==false){
                              return false;
                          }
                      }
                }
            }
            this.setting = function (i,vLeft,vTop,Img){
                this.citizen[i][4]['left'] = this.citizen[i][0] / 30
                this.citizen[i][4]['top'] = this.citizen[i][1] / 30
                this.citizen[i][5]['left'] = (vLeft * 30 - this.citizen[i][0]) / 30;
                this.citizen[i][5]['top'] = (vTop * 30 - this.citizen[i][1]) / 30;
                this.citizen[i][0] += this.citizen[i][5]['left'];
                this.citizen[i][1] += this.citizen[i][5]['top'];
                this.citizen[i][3]+=1;
                this.F(this.citizen[i][6],this.citizen[i][0]+10/2,this.citizen[i][1]-10);
                this.ctx.drawImage(Img,this.citizen[i][0],this.citizen[i][1],30,30)
            }
            this.setArr = function (Img,x,y){
                 let jude = true;
                   for(let i = 0;i<this.xuniArr.length;i++){
                         if(x== this.xuniArr[i]['X'] && y == this.xuniArr[i]['Y']){
                                jude = false;
                         }
                   }
                   if(jude){
                         this.xuniArr.push({'X':x,'Y':y});
                   }
                for(let i = 0;i<this.xuniArr.length;i++){
                    Games.ctx.drawImage(Img,this.xuniArr[i]['X']*30,this.xuniArr[i]['Y']*30,30,30);
                }
            }
        }
        let Games = new Game();
        function HomeHide(){
                Games.name = document.getElementById('name').value;
                $('.page').hide();
                $('#backName').hide()
                $('.select').show();
        }
        function backNa(){
            $('#backName').show()

        }
        function SetText(name,value){
              $('#'+name).html(value);
        }
        function select(index){
             $('#content').hide();
             $('.Game').show();
             Games.init();
             Games.index = index;
             if(index == 1){
                  Games.Gold = 3000;
             }
             if(index == 2){
                  Games.Gold = 5000;
             }
             if(index == 3){
                 Games.Gold = 8000
             }
             SetText('GoldText',Games.Gold);
             let count = index;
             for (let c=0;c<4;c++){
                 if(c!=0 && index == 1 || c!=0&& index == 2){
                     index =1
                 }else if(c!=0 && index == 3){
                      index = 2;
                 }
                 let k =0;
                 while (k!=index){
                       let left = Math.floor(Math.random()*19);
                       let top = Math.floor(Math.random()*19);
                       let jude =false;
                       for (let i =0;i<Games.Bath.length;i++){
                              if(Games.Bath[i][1] == left && Games.Bath[i][2] == top){
                                    jude  = true;
                                    break;
                              }
                       }
                       if(jude){
                           continue;
                       }
                       k++;
                       let Arr =[]
                       for (let m=0;m<5;m++){
                           Arr.push(Math.floor(Math.random()*(3-1+1))+1);
                       }
                       Games.Bath.push([c,left,top,0,0,Arr])
                 }
                 index= count;
             }
             Games.mapCreate(1);
             Games.loadJude = true;
        }
        function AddLu(){
             Games.luJude = true;
             document.onmousemove = '';
            document.onmousedown = function (e){
                if(!Games.luJude){
                    return false
                }
                moveFlag = true
                document.onmousemove = function (e){
                    if(moveFlag){
                        let x = e.pageX  - Games.canvas.offsetLeft;
                        let y = e.pageY - Games.canvas.offsetTop;
                        let X = parseInt(x / 30);
                        let Y = parseInt(y / 30);
                        Games.mapCreate();
                        let Img = new Image();
                        Img.src = './img/lu.png';

                        if(y<600){
                            Games.setArr(Img,X,Y);
                        }
                        document.onmouseup = function (){
                            if(y<600){
                                Games.AddImg(x,y);
                                Games.Gold -=80;
                                SetText('GoldText',Games.Gold);
                            }
                            moveFlag = false
                        }
                    }
                }
            }
        }
        let divOvj = document.getElementById('cover');
        let moveFlag = false;

        function AddGate(index,This){
            Games.GateJude = true;
            document.onmousemove = function (e){
                 if(Games.GateJude == false){
                     return ;
                 }
               let x = e.pageX  - Games.canvas.offsetLeft;
               let y = e.pageY - Games.canvas.offsetTop;
               let X = parseInt(x / 30);
               let Y = parseInt(y / 30);
               if(index == 1){
                    GateHandel(X,Y);
               }
               if(index == 2){
                   LightHandel(X,Y);
               }
               if(index == 3){
                   rubberHandel(X,Y);
               }
            }
        }
        function GateHandel(X,Y){
              if(Games.map[Y][X] == 1){
                  Games.mapCreate();
                   Games.createImg(1,X*30,Y*30);
                   document.onmousedown = function (){
                       if(Games.GateJude == false){
                           return ;
                       }
                          Games.Gate[0] = X;
                          Games.Gate[1] = Y;
                          Games.Gate[2] = 0;
                          Games.Gold -=1000;
                          SetText('GoldText',Games.Gold);
                          Games.GateJude = false;
                   }
              }
        }
        function LightHandel(X,Y){
             Games.mapCreate();
              if(Games.map[Y][X] == 1){
                  let map = Games.map;
                    if(map[Y - 1][X] == 1 && map[Y +1][X]== 1 && map[Y][X-1] == 1 || map[Y - 1][X] == 1 && map[Y +1][X]== 1 && map[Y][X+1] == 1 || map[Y - 1][X] == 1 && map[Y][X + 1]== 1 && map[Y][X-1] == 1 || map[Y + 1][X] == 1 && map[Y][X + 1]== 1 && map[Y][X-1] == 1){

                        Games.createImg(2,X*30,Y*30);
                        document.onmousedown = function (){
                            if(Games.GateJude == false){
                                return ;
                            }
                             Games.light.push([X,Y]);
                             Games.Gold -=500;
                             SetText('GoldText',Games.Gold);
                             Games.GateJude = false;
                        }
                    }
              }
        }
        function rubberHandel(X,Y){
            let jude = false
            Games.mapCreate();
            if(Games.Gate[0]== X && Games.Gate[1] == Y && jude == false){
                  jude=true
                  Games.createImg(1,X*30-5,Y*30-5,40,40)
            }
            for (let i =0;i<Games.light.length;i++){
                if(Games.light[i][0] == X && Games.light[i][1] == Y && jude == false){
                    jude=true
                    Games.createImg(2,X*30-5,Y*30-5,40,40)
                }
            }
            if(Games.map[Y][X] == 1 && jude == false) {
                jude=true
                Games.createImg(0,X*30-5,Y*30-5,40,40)
            }
             document.onmousedown = function(){
                    if(Games.Gate[0]== X && Games.Gate[1] == Y){
                         Games.Gate = [];
                         Games.mapCreate();
                         Games.Gold += 1000 * 0.8
                         SetText('GoldText',Games.Gold);
                         return ;
                    }
                    for (let i =0;i<Games.light.length;i++){
                         if(Games.light[i][0] == X && Games.light[i][1] == Y){
                              Games.light.splice(i,1);
                             Games.mapCreate();
                             Games.Gold += 500 * 0.8
                             SetText('GoldText',Games.Gold);
                             return ;
                         }
                    }
                    if(Games.map[Y][X] == 1) {
                        Games.map[Y][X] = 0;
                        Games.mapCreate();
                        Games.Gold += 80 * 0.8
                        SetText('GoldText',Games.Gold);
                    }
             }
        }
        function load(){
             Games.createCitizen();
             Games.CitizenY();
             Games.SetTime();
            document.getElementById('start').onclick = Games.LoadHui;
        }
</script>
</body>
</html>